<template>
	<view class="container">
		<!-- 头部 -->
		<uni-nav-bar backgroundColor="#0bc4e3" color="#fff" :title="data.info.name" :fixed="true" :statusBar="true"
			:border="false">
			<block v-slot:left>
				<uni-icons @click="back" class="back" color="#FFF" type="back" size="25"></uni-icons>
			</block>
			<block v-slot:right style="width: 40px;">
				<!-- <uni-icons type="redo" size="25" color="#FFF" ></uni-icons> -->
			</block>
		</uni-nav-bar>
		<swiper class="swiper" indicator-color="#ffffff" indicator-active-color="#0bc4e3" circular indicator-dots="true">
			<swiper-item class="swiperitem" v-for="(item,index) in data.info.img">
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="headerbox">
			<view class="header" @click="$goURl('/pages/business/businessdetail?id='+data.info.ID)">
				<view class="leftbox">
					<view class="img">
						<image :src="data.info.shop_head" mode=""></image>
					</view>
					<view class="right">
						<view class="name textsl1">
						 <view>{{data.info.name}}</view>	
					
						</view>
						<view class="box">
							<uni-rate :disabled="true" disabledColor="#FFC41F" size="20" :value="data.info.star" />
							<view class="rightbox" @click.stop="follow(data.info.ID)">
								{{data.info.follow==0?"关注":"取消关注"}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="contentbox">
				<view class="item" @click="data.index=0" :class="{active:data.index==0}">
					商品
				</view>
				<view class="item" @click="data.index=1" :class="{active:data.index==1}">
					商家简介
				</view>
			</view>
			<view class="" v-if="data.index==0">
				<view class="listbox">
					<scroll-view class="left" :scroll-x="true" show-scrollbar="false" style="white-space: nowrap">
						<view class="lists">
							<view class="item" :class="{'active':data.active==index}" v-for="(item,index) in data.businessClassList"
								:key="item.ID" @click="setActive(index)">
								{{item.name}}
							</view>
							
						</view>
					</scroll-view>
					<view class="right" @click="data.type=!data.type">
						|
						<image v-if="data.type" src="https://pubuimg.cqguanjie.cn/chat/16945952331758"></image>
						<image v-else src="https://pubuimg.cqguanjie.cn/chat/16945960727876"></image>
					</view>
				</view>
			</view>
			<view class="content" v-if="data.index==0">
				<view :class="{'lists':data.type,'list':!data.type}">
					<view class="item" v-for="(item,index) in data.list" @click="$goURl('/pages/commodity/details?id='+item.ID)">
						<view class="image">
							<image :src="item.img" mode="aspectFill"></image>
						</view>
						<view class="box">
							<view class="name textsl2">
								{{item.name}}
							</view>
							<view class="price">
								<view class="price1">
									￥<text>{{$toFiexd(item.price,2)}}</text>
								</view>
								<view class="price2">
									{{item.sales}}人付款
								</view>
							</view>
						</view>
					</view>
				</view>
				<empty v-if="data.list.length==0&&data.index==0"></empty>
			</view>
		</view>
		<view class="contents" v-if="data.index==1">
			<view class="address" style="display: flex;justify-content: space-between;">
				<uni-icons type="location" size="20"></uni-icons>
				<view class="addresss" style="display: flex;justify-content: space-between;" @click="open()">
					<view class="addressss" style="font-size: 12px;">
						{{data.info.province+data.info.city+data.info.area+data.info.address}}
					</view>
					<uni-icons type="paperplane" size="20"></uni-icons>
				</view>
			</view>
			<view class="address" style="display: flex;justify-content: space-between;">
				<uni-icons type="refresh" size="20"></uni-icons>
				<view class="addresss" style="display: flex;justify-content: space-between;">
					<view class="addressss" style="font-size: 12px;">
						营业时间：{{data.info.start_time||'9:00'}}-{{data.info.end_time||'18:00'}}
					</view>
					<!-- <uni-icons type="paperplane" size="30"></uni-icons> -->
				</view>
			</view>
			<view class="address" style="display: flex;justify-content: space-between;border-top: 20upx solid #f5f5f5;">
				<uni-icons type="phone" size="20"></uni-icons>
				<view class="addresss" style="display: flex;justify-content: space-between;" @click="phone()">
					<view class="addressss" style="font-size: 12px;">
						联系电话：{{data.info.mobile}}
					</view>
					<uni-icons type="phone-filled" size="20"></uni-icons>
				</view>
			</view>
			<view class="address" style="display: flex;justify-content: space-between;">
				<uni-icons type="home" size="20"></uni-icons>
				<view class="addresss" style="display: flex;justify-content: space-between;">
					<view class="addressss" style="font-size: 12px;">
						店铺介绍：{{data.info.introduce}}
					</view>
					<!-- <uni-icons type="paperplane" size="30"></uni-icons> -->
				</view>
			</view>
		</view>
		<view class="btn" @click="gopay()">
			买单
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
const {proxy} = getCurrentInstance();
	const data = reactive({
		id: 0,
		info: {},
		businessClassList: [],
		active: 0,
		page: 0,
		pages: 1,
		list: [],
		size: 10,
		type: true,
		index: 1
	})
	onLoad((option) => {
		data.id = option.id
	})
	onShow(() => {
		shopInfo() //店铺信息
		getbusinessClassList() //店铺分类
	})
	onPullDownRefresh(() => {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		getgoods()
		console.log('onReachBottom')
	})

	function shopInfo() {
		proxy.$request({
			url: `api/shopInfo/?id=${data.id}`,
			method: 'get',
			success(res) {
				console.log(res,"rres")
				data.info = res.data
				try{
					data.info.img = evalPro(data.info.img)|| [data.info.shop_head]
				}catch(e){
					//TODO handle the exception
					data.info.img=[data.info.shop_head]
					
				}
				
			}
		})
	}
	function evalPro(str) {
	    var Fn = Function;
	    return new Fn('return ' + str)();
	}
	// 点击关注/取消关注
	function follow(id) {
		proxy.$request({
			url: `api/follow/`,
			method: 'POST',
			data: {
				id: id
			},
			success: (res) => {
				if (res.errno == 0) {
					uni.showToast({
						icon: 'none',
						title: res.errmsg
					})
					data.info.follow = data.info.follow == 0 ? 1 : 0
				}
			}
		})
	}
function gopay(){
	proxy.$goURl('/pages/business/pay?id='+data.info.ID+'&discount='+5+'&notes='+data.info.name+'&money='+0)
}
	function phone(){
		uni.makePhoneCall({
			phoneNumber: data.info.mobile //仅为示例
		});
	}
	function getbusinessClassList() {
		proxy.$request({
			url: `api/businessClassList/?business_id=${data.id}&page=1&size=999`,
			method: 'get',
			success(res) {
				data.businessClassList = [{'name':'全部',ID:-1},...res.data.data]
				getgoods() //获取商品
			}
		})
	}

	function setActive(index) { //分类切换
		data.active = index
		data.page = 0
		data.pages = 1
		data.list = []
		getgoods()
	}

	function back(index) { //返回
		uni.navigateBack()

	}

	function open() {
		let item = data.info
		console.log(item.latitude, item.longitude)
		uni.openLocation({
			latitude: item.longitude, // 目标纬度
			longitude: item.latitude, // 目标经度
			name: item.address,
			address: item.province + item.city + item.area,
			success: function() {
				console.log('打开地图导航成功');
			},
			fail: function(err) {
				console.log('打开地图导航失败', err);
			}
		})
	}
	// 获取商品
	function getgoods() {
		// let id=JSON.parse(JSON.stringify())
		console.log()
		if (data.page < data.pages) {
			data.page++
			proxy.$request({
				url: `api/goods_list_all/0/?page=${data.page}&business_id=${data.id}&size=${data.size}&business_class_id=${data.businessClassList[data.active].ID}`,
				method: 'get',
				data: {
					page: data.page,
					size: data.size
				},
				success: (res) => {
					res.data.data.forEach(item => {
						data.list.push(item)
					})
					data.pages = Math.ceil(res.data.total / data.size)
				}
			})

		}

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.container {
		height: 100vh;

		.headerbox {
			// height: calc(30vh - 50px);
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.swiper {
			width: 100%;
			height: 400upx;

			.swiperitem {
				width: 100%;
				height: 400upx;

				image {
					width: 100%;
					height: 400upx;
				}
			}
		}

		.header {
			padding: 30upx;
			box-shadow: 0 1px 6px 2px #eee;
			margin: 30upx;
			border-radius: 20upx;

			.leftbox {
				display: flex;
			}

			.rightbox {
				min-width: 120upx;
				text-align: center;
				padding: 5upx 10upx;
				background-color: $color4;
				color: #fff;
				border-radius: 30upx;
				font-size: 28upx;
			}

			image {
				width: 120upx;
				height: 120upx;
				border-radius: 20upx;
			}

			.right {
				width: calc(100% - 140upx);
				height: 120upx;

				margin-left: 20upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-size: 32upx;
					font-weight: 600;
					color: $color4;
				}

				.box {
					margin: 5upx 0;
					display: flex;
					justify-content: space-between;

					.gz {
						font-size: 24upx;
						color: $color4;
						border-radius: 10upx;
					}
				}

				.introduce {
					font-size: 24upx;
					color: $color4;
				}
			}
		}

		.contentbox {
			display: flex;
			border-bottom: 1px solid #eee;
			padding-bottom: 10upx;
			display: flex;
			justify-content: space-around;
			font-weight: bold;
			font-size: 16px;

			.active {
				color: $color4;
			}
		}

		.contents {

			.address {
				padding:20upx 30upx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 20upx;
				.addresss {
					width: calc(100% - 30px);
					border-bottom: 1upx solid #eee;
					padding-bottom: 20upx;
				}
			}
		}

		.listbox {
			display: flex;
			width: calc(100% - 40upx);
			align-items: center;
			padding: 0 20upx;
			overflow: hidden;
			margin-top: 10upx;

			.left {

				width: calc(100% - 40upx);

				.lists {
					display: flex;
				}

				.item {
					color: #999;
					padding: 0 15upx;
					margin-right: 20upx;
					text-align: center;
				}

				.active {
					color: $color4;
					margin-right: 20upx;
				}


			}

			.right {
				width: 60upx;
				display: flex;
				margin-left: 10upx;
				color: #fff;
				align-items: center;

				image {
					width: 50upx;
					height: 45upx;
					margin-left: 10upx;
				}
			}
		}

		.content {
			padding: 20upx;

			// height: calc(70vh - 30upx);
			.list {
				// column-count:2;
				// column-gap:10px;
				display: flex;
				flex-wrap: wrap;

				// padding-bottom: 10upx;
				.item {
					width: 48%;
					margin: 0 1%;
					background-color: $color4;
					margin-bottom: 20upx;
					background-color: #fff;
					box-shadow: 0 0 10upx #eee;
					border-radius: 20upx;

					.image {
						width: 100%;

						image {
							width: 100%;
							border-radius: 20upx 20upx 0 0;
						}
					}

					.box {
						padding: 10upx;

						.name {
							font-size: 28upx;
							font-weight: bold;
							margin-bottom: 10upx;
						}

						.price {
							color: #FF4E00;
							font-size: 32upx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price2 {
								color: #999;
								font-size: 20upx;
							}
						}
					}
				}
			}

			.lists {
				.item {
					background-color: $color4;
					margin-bottom: 20upx;
					background-color: #fff;
					box-shadow: 0 0 10upx #eee;
					border-radius: 20upx;
					overflow: hidden;
					display: flex;
					padding: 20upx;

					.image {
						width: 200upx;
						height: 200upx;

						image {
							width: 200upx;
							height: 200upx;
							border-radius: 20upx;
						}
					}

					.box {
						width: calc(100% - 220upx);
						padding: 10upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							font-size: 28upx;
							font-weight: bold;
							margin-bottom: 10upx;
						}

						.price {
							color: #FF4E00;
							font-size: 32upx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price2 {
								color: #999;
								font-size: 20upx;
							}
						}
					}
				}
			}
		}
	}
	.btn{
		text-align: center;
		background-color: $color4;
		color: #fff;
		padding: 20upx;
		position: fixed;
		bottom:20px;
		width: calc(90% - 40upx);
		left:5%;
		border-radius: 20upx;
	}
</style>